<template>
    <div class="label-select">
        <div class="label-style">
            <slot></slot>{{labelName}}：
        </div>
        <div class="select-style">
            <a-select :placeholder="placeholder" v-model:value="refSelectedValue" size="middle"
                :style="'width:' + inputWidth +'px'" :options="selectOptions" @change="handleChange" allowClear
                v-model:disabled="isDisabled">
            </a-select>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'DetailLabelSelect'
}
</script>
<script lang="ts" setup>
import { ref, toRef } from 'vue';

const props = defineProps({
    labelName: String,
    selectedValue: String,
    selectOptions: [] as any[],
    placeholder: String,
    isDisabled: {
        type: Boolean,
        default: false,
    },
    inputWidth: {
        type: Number,
        default: 150
    },
});
const refSelectedValue = toRef(props, 'selectedValue');

const emits = defineEmits(['update:selectedValue']);
// 需要传递的值
const handleChange = (refSelectedValue: any) => {
    console.log('子组件的值', refSelectedValue.value);
    emits('update:selectedValue', refSelectedValue.value);
}
</script>
<style lang="less" scoped>
.label-select {
    height: 32px; // 默认输入框高度为32px
    display: flex;
    align-items: center;

    .select-style {
        margin-left: 10px;
    }

    :deep(.ant-select-selector) {
        text-align: left;
    }
}
</style>